<!--
 * @Description: 混凝土产品命名规则
 * @Author: wangwangwang
 * @Date: 2020-09-21 14:09:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-29 14:22:22
-->
<template>
  <div class="pages_content">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="tabtop">
          <div v-for="(item, index) in contractTypelist" :key="index" @click="choose(item.id)">
            <div :class="currenindex == index ? 'active' : 'text'">{{ item.value }}</div>
          </div>
        </div>
        <div class="infoo">
          <div class="left">
            <div class="left-top-bg">
              <div class="left-top">
                <div class="text">选择</div>
                <el-button v-if="currenindex == 0" size="small" class="bottom_all" @click="addDialog = true">添 加</el-button>
              </div>
              <div v-if="currenindex == 0" class="left-info">
                <template v-for="(item, index) in leftItemList">
                  <div :key="index" class="left-info-item">
                    <div class="title">{{ item.typeName }}</div>
                    <!-- 单选 -->
                    <div v-if="index == 0" class="radio">
                      <el-radio-group v-model="title">
                        <draggable v-model="item.list" @end="drageEnd(item.list)">
                          <template v-for="(item, index) in item.list">
                            <div :key="index" class="radio-bg">
                              <el-radio :label="item.id">{{ item.name }}</el-radio>
                              <span v-if="index!=0" class="block">
                                <i class="icon iconfont iconicon_button_modification" style="font-size: 12px;" @click.stop="showtext(item)"></i>
                                <i class="el-icon-error" style="font-size: 12px;" @click.stop="deletetext(item)"></i>
                              </span>
                            </div>
                          </template>
                        </draggable>
                      </el-radio-group>
                    </div>
                    <!-- 复选 -->
                    <div v-else class="radio">
                      <el-checkbox-group v-model="type">
                        <draggable v-model="item.list">
                          <template v-for="(item, index) in item.list">
                            <div :key="index" class="radio-bg">
                              <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
                              <span class="block">
                                <i class="icon iconfont iconicon_button_modification" style="font-size: 12px;" @click.stop="showtext(item)"></i>
                                <i class="el-icon-error" style="font-size: 12px;" @click.stop="deletetext(item)"></i>
                              </span>
                            </div>
                          </template>
                        </draggable>
                      </el-checkbox-group>
                    </div>
                  </div>
                </template>
              </div>
              <div v-if="currenindex == 1" class="left-info">
                <template v-for="(item, index) in leftItemList">
                  <div :key="index" class="left-info-item">
                    <div class="title">{{ item.typeName }}</div>
                    <div class="radio">
                      <el-radio-group v-model="tableParam.namingRuleId">
                        <template v-for="(item, index) in item.list">
                          <div :key="index" class="radio-bg">
                            <el-radio ref="radioName" :label="item.id">{{ item.name }}</el-radio>
                          </div>
                        </template>
                      </el-radio-group>
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <div v-if="currenindex == 0" class="info-bottom">
              <div v-for="(item, index) in comData" :key="index" class="info-bottom-item">
                <i class="el-icon-error" @click.stop="delcomData(index)"></i>
                <div class="text">{{ item.name }}</div>
              </div>
              <div class="info-bottom-add" @click="addcomData()">
                <i class="el-icon-circle-plus"></i>
                <span>添加条件</span>
              </div>
            </div>
          </div>
          <div v-if="currenindex == 0" class="center">
            <div class="center-bg">
              <div>
                <el-button size="medium" class="bottom_all_two" @click="saveRepelData(1)">
                  单互斥
                  <i class="el-icon-arrow-right el-icon--right"></i>
                </el-button>
              </div>
              <div>
                <el-button size="medium" class="bottom_all_two" @click="saveRepelData(2)">
                  组合互斥
                  <i class="el-icon-arrow-right el-icon--right"></i>
                </el-button>
              </div>
              <div>
                <el-button size="medium" class="bottom_all" icon="el-icon-arrow-left" @click="DeletesRepel()">移除所选</el-button>
              </div>
              <div>
                <el-button size="medium" @click="DeletesallRepel()">清空去全部已选</el-button>
              </div>
            </div>
          </div>
          <div v-if="currenindex == 0" class="right">
            <div style="height:calc(100% - 76px);border: 1px solid rgba(225, 229, 237, 1);">
              <div class="left-top">
                <div class="text">已选互斥表</div>
              </div>
              <div class="left-info">
                <div class="radio">
                  <el-checkbox-group v-model="deletesRepelsdata">
                    <template v-for="(item, index) in righItemtlist">
                      <div :key="index" class="radio-bg">
                        <el-checkbox :label="item.id">
                          <span v-if="item.type == 1" style="padding-right: 5px;color:#000">单</span>
                          <span v-if="item.type == 2" style="padding-right: 5px;color:#FF0000">组合</span>
                          {{ item.name }}
                        </el-checkbox>
                      </div>
                    </template>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
            <div class="right-text">黑色表示单互斥，红色表示组合互斥，组合互斥表示不能出现所选内容的产品。</div>
          </div>
          <div v-if="currenindex == 1" class="Rright">
            <div class="left-top">
              <div class="text">设置价格</div>
            </div>
            <div class="navList-bg">
              <div class="navList">
                <template v-for="(item, index) in navList">
                  <div :key="index" :class="index == navListindex ? 'navListItemactive' : 'navListItem'" @click="choosenavListindex(item, index)">{{ item.name }}</div>
                  <div v-if="index !== Number(navList.length - 1) && navListindex !== index && navListindex !== Number(index + 1)" :key="'hr' + index" class="navListhr"></div>
                </template>
              </div>
            </div>
            <div class="input">
              <el-form v-if="UserInfo.adminStatus == 1" label-width="80px">
                <el-form-item label="公司">
                  <el-select v-model="companyId" placeholder="请选择" @change="getmoneyData">
                    <el-option v-for="(item, index) in companylist" :key="index" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <el-form label-width="80px">
                <el-form-item label="价格">
                  <el-input v-model="money" type="Number" style="width: 400px;"></el-input>
                </el-form-item>
              </el-form>
              <el-form label-width="80px">
                <el-form-item label="生效时间">
                  <el-date-picker v-model="time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择开始时间"></el-date-picker>
                </el-form-item>
              </el-form>
            </div>
            <div class="input">
              <el-button size="mini" class="bottom_all" style="margin-left: 0;" @click="addmoney()">
                <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
                添加
              </el-button>
            </div>
            <div class="money">
              <div v-if="navListindex==0" class="money-title">信息价格表</div>
              <div v-if="navListindex==1" class="money-title">内部价格表</div>
              <div v-if="navListindex==2" class="money-title">市场价格表</div>
              <el-table :data="moneyData" :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%;">
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="money" :label="['信息价格','内部价格','市场价格'][navListindex]" width="100" align="center"></el-table-column>
                <el-table-column prop="name" label="产品名称" width="120" align="center"></el-table-column>
                <el-table-column prop="company" label="公司" width="150" align="center"></el-table-column>
                <el-table-column prop="startTime" width="150px" label="生效时间" align="center"></el-table-column>
                <el-table-column label="操作" width="120px" align="center" fixed="right">
                  <template slot-scope="scope">
                    <el-link class="table_link" :underline="false" @click="deletemoney(scope.row)">删除</el-link>
                  </template>
                </el-table-column>
              </el-table>
              <div class="card_bottom_left">
                <div class="top_page_totle">总共{{ total }}条</div>
                <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total"></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 添加 -->
    <el-dialog v-dialogDrag :visible.sync="addDialog" width="480px" :close-on-click-modal="false" :before-close="resetFromDate">
      <span slot="title" class="dialog-title">添加</span>
      <div class="dialoginfo">
        <el-form :inline="true" label-width="110px">
          <el-form-item prop="code">
            <span slot="label">名称</span>
            <el-input v-model="addText" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <span slot="label">类型</span>
            <el-select v-model="addTypeId" placeholder="请选择">
              <el-option v-for="(item, index) in leftList" :key="index" :label="item.itemName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resetFromDate">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="addItem()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog v-dialogDrag :visible.sync="upDateDialog" width="480px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">修改</span>
      <div class="dialoginfo">
        <el-form :inline="true" label-width="110px">
          <el-form-item prop="code">
            <span slot="label">名称</span>
            <el-input v-model="upDateText" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="upDateDialog = false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="upDatedate()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script src="./js/CCTrules.js"></script>
<style lang="scss" src="./css/CCTrules.scss" scoped></style>
